<template>
  <ul class="timeline">
    <li v-for="(item, index) in timelineList" :key="index">
      <section class="timeline__focus"></section>
      <section>{{item.datetime}}</section>
      <section>{{item.content}}</section>
    </li>
  </ul>
</template>

<script setup lang="ts">
const timelineList = [
  {
    datetime: '2021.04 - 至今',
    content: '在龙湖集团担任前端开发工程师，负责多个项目的开发与维护。',
  },
  {
    datetime: '2017.06 - 2021.04',
    content: '在本来生活任职前端开发，参与多个电商平台开发。',
  },
  {
    datetime: '2017.03 - 2018.06',
    content: '在联想集团负责前端开发任务，积累实际经验。',
  },
  {
    datetime: '2017.02',
    content: '来京投靠老友',
  },
  {
    datetime: '2015.06 - 2016.06',
    content: '迷茫的人四处偷师打杂😜',
  },
  {
    datetime: '...',
    content: '...',
  },
  {
    datetime: '2012.09',
    content: '步入大学，梭哈~~',
  },
]
</script>

<style scoped lang="scss">
.timeline {
  width: 100%;
  font-size: 12px;
  padding-left: 8px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  li {
    list-style: none;
    position: relative;
    padding: 14px 0px 0px 14px;
    border-left: 2px solid #d5d5d5;
    border-radius: 0;
    scroll-snap-align: end;
    color: var(--main_text_color);

    .timeline__focus {
      width: 12px;
      height: 12px;
      border-radius: 22px;
      background-color: rgb(255 255 255);
      border: 2px solid #fff;
      position: absolute;
      left: -7px;
      top: 50%;
    }

    &:first-child {
      .timeline__focus {
        &:first-child {
          background-color: #2ecc71;
          animation: focus 1.8s ease infinite;
        }
      }
    }
  }
}
</style>
